<template>
  <div class="box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="注册" name="first">
                          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="姓名" prop="name">
                              <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="pwd">
                              <el-input v-model="ruleForm.pwd"></el-input>
                            </el-form-item>
                            <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                           
                          </el-form-item>
                          </el-form>


            </el-tab-pane>
            <el-tab-pane label="登录" name="second">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="姓名" prop="username">
                              <el-input v-model="ruleForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                              <el-input v-model="ruleForm.password"></el-input>
                            </el-form-item>
                            <el-form-item>
                            <el-button type="primary" @click="login('ruleForm')">登录</el-button>
                           
                          </el-form-item>
                          </el-form>


            </el-tab-pane>
           
          </el-tabs>
  </div>
</template>

<script>
import {registerApi,loginApi} from '@/utils/https.js'
export default {
   data() {
      return {
        activeName: 'second',
         ruleForm: {
          name: '',
          pwd: '',
          username:"",
          password:"",

        
        },
         rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 6, message: '长度在 6  个字符', trigger: 'blur' }
               ]
              }
      };
    },
    methods: {
          handleClick(tab, event) {
            // console.log(tab, event);
          },
         //注册事件
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                    registerApi(this.ruleForm).then(res=>{
                      console.log(res);
                    })
                  
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          //登陆事件
          login(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {//正则验证成功
                loginApi({
                  username:this.ruleForm.username,password:this.ruleForm.password
                  }).then(res=>{
                   
                    if(res.code==0){
                      this.$router.push("/layout")
                      //把用户保存到本地
                      
                      
               let userInfo= {
                  username:this.ruleForm.username,
                  password:this.ruleForm.password,
                  id:res.id
                  }      
               localStorage.setItem("user",JSON.stringify(userInfo))
                    }
                })
                  
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
    
    }

}
</script>

<style lang="less" scoped>
  .box{width: 400px;height: 300px; position: fixed;
       left:50%;top:50%;margin-top:-150px;margin-left: -200px;
        box-shadow: 2px 2px 5px; padding:20px ; box-sizing:border-box;
  
      }
</style>